<template>
    <nav>
      <menu-logo></menu-logo>
      <span class="line"></span>
      <menu-drop :works="works" :target="target" @newProject="newProject" @updateFromLocal="updateFromLocal"></menu-drop>
      <span class="line"></span>
      <div class="work-name">
        <input v-model="projectName" type="text" maxlength="20" placeholder="请输入项目名称"/>
      </div>
      <span class="line"></span>
      <div class="save">
        <div v-if="submit==='ready'" class="save-button" @click="submitProject">
            <span>提交作品</span>
        </div>
        <div v-if="submit==='committing'" class="save-tip-committing"><i class="fa fa-spinner" aria-hidden="true"></i>正在提交</div>
        <div v-if="submit==='success'" class="save-tip-success"><i class="fa fa-check-circle" aria-hidden="true"></i>提交成功</div>
      </div>
    </nav>
</template>

<script>
import MenuDrop from './components/menu-drop'
import MenuLogo from './components/menu-logo'
export default {
  name: 'menu-bar',
  data () {
    return {
      projectName: '我的编程作品'
    }
  },
  props: {
    works: {
      type: Array
    },
    target: {
      type: Number
    },
    submit: {
      type: String
    }
  },
  components: {
    MenuLogo,
    MenuDrop
  },
  methods: {
    newProject: function () {
      this.$emit('newProject')
    },
    updateFromLocal: function (data) {
      this.$emit('updateFromLocal', data)
    },
    submitProject: function () {
      this.$emit('submitProject', this.projectName)
    }
  }
}
</script>

<style scoped>
  @import '../../css/font.css';
  nav{
    /*font-family: HelveticaNeue,serif;*/
    font-family: "Microsoft YaHei UI",serif;
    width: 100%;
    height: 48px;
    background-color: #4D97FE;
    position: fixed;
    z-index: 1000;
      min-width: 900px;
  }
  .line{
      width: 1px;
      height: 20px;
      background-color: #498cea;
      display: inline-block;
      vertical-align: top;
      margin-top: 14px;
  }
  .work-name{
    display: inline-block;
    vertical-align: top;
    height: 28px;
    width: 200px;
    margin-top: 9px;
    margin-left: 10px;
  }
  .work-name>input{
    margin: auto;
    height: 26px;
    width: 180px;
    background-color: #428AEF;
    border-radius: 6px;
    border: 1px solid #207fc0;
    outline: none;
    padding-left: 10px;
    color: rgb(245,245,245);
  }
  .work-name>input::-webkit-input-placeholder{
    color: rgb(235,235,235);
  }
  .save{
      height: 28px;
      display: inline-block;
      vertical-align: top;
  }
  .save-button{
    height: 28px;
    /*width: 80px;*/
    display: inline-block;
    color: white;
    /*font-weight: 600;*/
    font-size: 14px;
    vertical-align: top;
    margin-left: 10px;
    background-color: #FF8C1A;
    border-radius: 5px;
    margin-top: 10px;
    cursor: pointer;
  }
  .save-button>span{
    padding: 0 10px;
    height: 100%;
    text-align: center;
    line-height: 28px;
  }
  .save-button:hover{
      background-color: rgb(238,141,48);
  }
  .save-tip-committing{
      font-size: 13px;
      margin-left: 20px;
      font-weight: 600;
      display: inline-block;
      line-height: 48px;
      color: yellow;
      letter-spacing: 1px;
      vertical-align: top;
  }
  .fa-spinner{
      font-size: 15px;
      margin-right: 5px;
      color: yellow;
      animation: spinner 2s linear infinite;
  }
  @keyframes spinner {
      from { transform: rotate(0deg);}
      50% { transform: rotate(180deg);}
      to { transform: rotate(360deg);}
  }
</style>
